<div class="admin-dashboard">
  <div class="dashboard-header">
    <h1>管理员控制台</h1>
    <div class="header-actions">
      <button class="btn btn-outline-primary" (click)="batchImport()">
        <i class="fas fa-upload"></i> 批量导入
      </button>
      <button class="btn btn-primary" (click)="createProblem()">
        <i class="fas fa-plus"></i> 创建新题目
      </button>
    </div>
  </div>

  <div class="dashboard-content">
    <!-- 加载状态 -->
    <div *ngIf="loading" class="loading">
      <div class="spinner"></div>
      <p>正在加载题目列表...</p>
    </div>

    <!-- 错误状态 -->
    <div *ngIf="error" class="error-message">
      <i class="fas fa-exclamation-triangle"></i>
      <p>{{ error }}</p>
      <button class="btn btn-secondary" (click)="loadProblems()">重试</button>
    </div>

    <!-- 题目列表 -->
    <div *ngIf="!loading && !error" class="problems-section">
      <div class="section-header">
        <h2>题目管理</h2>
        <span class="problem-count">共 {{ problems.length }} 道题目</span>
      </div>

      <div *ngIf="problems.length === 0" class="empty-state">
        <i class="fas fa-folder-open"></i>
        <p>暂无题目</p>
        <div class="empty-actions">
          <button class="btn btn-primary" (click)="createProblem()">创建第一道题目</button>
          <button class="btn btn-outline-primary" (click)="batchImport()">批量导入题目</button>
        </div>
      </div>

      <div *ngIf="problems.length > 0" class="problems-table-container">
        <table class="problems-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>标题</th>
              <th>难度</th>
              <th>时间限制</th>
              <th>内存限制</th>
              <th>测试用例</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let problem of problems" class="problem-row">
              <td>{{ problem.id }}</td>
              <td class="problem-title">
                <div class="title-text">{{ problem.title }}</div>
              </td>
              <td>
                <span class="difficulty-badge" [ngClass]="getDifficultyClass(problem.difficulty)">
                  {{ problem.difficulty }}
                </span>
              </td>
              <td>{{ problem.timeLimit }}ms</td>
              <td>{{ problem.memoryLimit }}MB</td>
              <td>{{ problem.testCases.length || 0 }}</td>
              <td>{{ problem.createdAt | date:'yyyy-MM-dd HH:mm' }}</td>
              <td class="actions">
                <button class="btn btn-sm btn-outline-primary" (click)="editProblem(problem.id)" title="编辑">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="btn btn-sm btn-outline-danger" (click)="deleteProblem(problem.id)" title="删除">
                  <i class="fas fa-trash"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
